<template>
  <div>
    <canvas ref="cav" id="cav"> </canvas>
    <div id="login">
      <div class="title">用户登录</div>
      <el-form
        :model="user"
        :rules="rules"
        ref="login"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item style="margin-top: 70px" label="用户名" prop="username">
          <el-input style="width: 300px" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            show-password
            type="password"
            style="width: 300px"
            v-model="user.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 90px"
            type="primary"
            @click="submitForm"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Cookie from "js-cookie";
import { mapGetters } from "vuex";
import {line,circle,textA} from "@/utils/canvas"
import {Message} from 'element-ui'
export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters("login", ["token"]),
  },
  methods: {
    submitForm() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          const res = this.$store.dispatch("login/login", this.user);
          res.then(
            (resolve) => {
              Cookie.set("token", this.token);
              this.$router.replace("/");
            },
            (err) => {
              Message.error(err.message);
              this.user.password = ''
            }
          );
        } else {
          return false;
        }
      });
    },
    initCanvas() {
      const cav = this.$refs.cav;
      const ctx = cav.getContext("2d");
      cav.width = document.documentElement.clientWidth;
      cav.height = document.documentElement.clientHeight;
      const w = cav.width;
      const h = cav.height;

      // 定义一个小球类：包括小球属性
      class Ball {
        // 构造函数
        constructor(x, y, r, color, xSpeed, ySpeed, t) {
          this.x = x;
          this.y = y;
          this.color = color;
          this.r = r;
          this.xSpeed = xSpeed;
          this.ySpeed = ySpeed;
          this.t = t;
        }

        // 画小球
        drawBall() {
          circle(ctx,this.x, this.y, this.r, this.color);
          textA(ctx,this.t, this.x + this.r, this.y, this.color);
          this.run();
        }

        // 运动的小球
        run() {
          // 碰撞检测
          if (this.x - this.r <= 0 || this.x + this.r >= w)
            this.xSpeed = -this.xSpeed;
          if (this.y - this.r <= 0 || this.y + this.r >= h)
            this.ySpeed = -this.ySpeed;

          this.x += this.xSpeed;
          this.y += this.ySpeed;
        }
      }

      class Star{
        constructor(x,y,r){
          this.x = x
          this.y = y
          this.r = r
        }
        run(){
          this.r -= 0.3
          circle(ctx,this.x,this.y,this.r,"white")
        }
      }

      // 定义一个数组，用于存放已经创建的小球
      let ballArr = [];
      let starArr = []
      const textArr = [
        "javaScript",
        "html",
        "css",
        "echarts",
        "Vue",
        "Axios",
        "Ajax",
        "vuex",
        "less",
        "vue-router",
      ];
      for (let i = 0; i < 10; i++) {
        var r = Math.random() * 60;
        let x = Math.random() * (w - 2 * r) + r;
        let y = Math.random() * (h - 2 * r) + r;
        let color = `${
          "rgb(" +
          parseInt(Math.random() * 236 + 20) +
          "," +
          parseInt(Math.random() * 206 + 50) +
          "," +
          parseInt(Math.random() * 256) +
          ")"
        }`;
        let xSpeed = Math.random() * 5;
        let ySpeed = Math.random() * 5;

        let ball = new Ball(x, y, r, color, xSpeed, ySpeed, textArr[i]);
           
        ballArr.push(ball);
      }
      this.timer = setInterval(() => {
        ctx.clearRect(0, 0, w, h);

        // 创造star
        let x1 = Math.random() * (w - 2 * r) + r;
        let y1 = Math.random() * (h - 2 * r) + r;
        let star = new Star(x1,y1,4)
        starArr.push(star)

        // ball
        for (let i = 0; i < 10; i++) {
          ballArr[i].drawBall();
          // 画连线
          const currentBall = ballArr[i];
          for (let j = 0; j < i; j++) {
            const preBall = ballArr[j];
            line(ctx,currentBall.x,currentBall.y,preBall.x,preBall.y,currentBall.color);
          }
        }

        // star
        for(let i=0;i<starArr.length;i++){
          const star = starArr[i]
          if(star.r<=1) starArr.splice(i,1)
          star.run()
        }
        
      }, 40);
    },
  },
  mounted() {
    this.initCanvas();
  },
  beforeDestroy(){
    clearInterval(this.timer)
    this.timer = null
  }
};
</script>

<style lang='less' scoped>
#cav{
      display: block;
      margin: 0 auto;
      border: 1px solid black;
      /* background-color: #041C3F; */
      background-color: rgb(4, 23, 68);
    }
#login {
  width: 480px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid gainsboro;
  border-radius: 50%;
  box-shadow: 0px 0px 25px gainsboro;
  background-color: rgb(209, 205, 182);
  padding-top: 40px;

  .title {
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }
  .demo-ruleForm {
    margin-left: 25px;
    margin-top: 30px;
    width: 450px;
    height: 300px;
    position: absolute;
  }
}
</style>